<template>
<el-card class="category-container">
  <div class="container-header">
      <el-form class="container-header-form" size="large">
        <el-form-item label="分类名称:" >
          <el-input  style="width: 230px" clearable v-model="search" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="是否推荐:" >
          <el-select placeholder="请选择" clearable v-model="recommend"  style="width: 180px">
            <el-option v-for="(item, index) in op" :key="item.key" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-right: none">
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <el-form size="large" class="container-header-form">
        <el-form-item>
          <el-button icon="Plus" type="success">
            新增类型
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container-content">
      <!-- 表格数据 -->
      <el-table :stripe="true" border class="container-content-table" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
                :data="tableData" stripe>
        <el-table-column prop="name" width="280" label="分类名称" />
        <el-table-column prop="url" label="分类图" width="230" >
          <template #="{row}">
            <el-image
              class="typeImg"
              :src="row.url"
              fit="cover"
              @click="showBanner(row.firstImg)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="descs" label="商品描述" />
        <el-table-column prop="sortOrder" width="210"  label="排序"/>
        <el-table-column prop="isRecommend" width="210" label="是否推荐">
          <template #="{row}">
            {{row.isRecommend === 1 ? "推荐" : "不推荐"}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">              
          <template #="{ row }">

            <!-- 修改按钮 -->
            <el-tag @click="editBtn(row.bannerUrl)" plain type="primary">
              <el-icon>
                <Edit/>
              </el-icon>
            </el-tag>

            <!-- 删除按钮 -->
            <el-popconfirm width="157" @confirm="removeUser(row.id)" icon="WarnTriangleFilled" title="此操作将永久删除">
            
              <template #reference>
                <el-tag type="danger" style="margin:0px 10px;">
                  <el-icon>
                    <Delete/>
                  </el-icon>
                </el-tag>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
</el-card>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
let search = ref<string>("")
let recommend = ref<string>("")
const op = [
  {
    key: 1,
    value: "推荐"
  }, 
  {
    key: 0,
    value: "不推荐"
  }
]
const tableData = [
  {
    name: "敦煌风",
    descs: "传统礼仪之美",
    sortOrder: 1,
    isRecommend: 1,
    url: "2629514c-3f79-406b-9d52-d2068bde6435.jpg",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "徐某"
  },
  {
    name: "苗疆",
    descs: "前年服饰传承",
    sortOrder: 10,
    isRecommend: 1,
    url: "0202726e-89d4-4a63-b654-2903828d28f2.jpg",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "沈某"
  },
  {
    name: "战国袍",
    descs: "大疆风格满满",
    sortOrder: 3,
    isRecommend: 1,
    url: "8fa41941-52a3-4ff2-9c7a-87e67c997a86.jpg",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "党某"
  },
  {
    name: "锦鲤款",
    descs: "",
    sortOrder: 4,
    isRecommend: 0,
    url: "",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "贾某"
  },
  {
    name: "马面裙",
    descs: "大疆风格满满",
    sortOrder: 1,
    isRecommend: 1,
    url: "01f93f79-b7fe-4357-866a-1ded36b7de3f.jpg",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "白某"
  },
  {
    name: "褶群",
    descs: "",
    sortOrder: 6,
    isRecommend: 0,
    url: "",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "张某"
  },
   {
    name: "九尾",
    descs: "",
    sortOrder: 7,
    isRecommend: 0,
    url: "",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "张某"
  },
  {
    name: "袄裙",
    descs: "",
    sortOrder: 8,
    isRecommend: 0,
    url: "",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "张某"
  },
  {
    name: "齐腰襦裙",
    descs: "",
    sortOrder: 9,
    isRecommend: 0,
    url: "",
    updatedTime: "2025-01-12 10:27:38",
    updatedBy: "张某"
  },
]
</script>

<style scope lang="scss">
.container-header {
  display: flex;
  justify-content: space-between;
  .container-header-form {
    display: flex;
    .el-form-item {
      margin-right: 30px;
    }
  }
}
</style>